<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    img {
      vertical-align: middle;
    }

    .lunbo {
      width: 820px;
      overflow: hidden;
      margin: 0 auto;
      border: 5px solid red;
      position: relative;
    }

    .lunboBox {
      width: 4100px;
      display: flex;
      position: relative;
      /* pic1   -820 * 0 */
      left: 0;
      /* pic2   -820 * 1 */
      /* left: -820px; */
      /* pic2   -820 * 2 */
      /* left: -1640px; */
      /* pic2   -820 * 3 */
      /* left: -2460px; */
      /* pic2   -820 * 4 */
      /* left: -3280px; */
      transition: left 0.5s;
    }

    .lubnoBox li {
      flex: 1;
    }

    .lubnoBox li>img {
      width: 100%;
    }

    .tabList {
      display: flex;
      line-height: 40px;
      background-color: #ccc;
    }

    .tabList li {
      flex: 1;
      text-align: center;
      cursor: pointer;
    }

    .tabList li.current {
      background-color: #fff;
    }

    .btn {
      position: absolute;
      top: 50%;
      padding: 5px 10px;
      border: none;
      color: #666;
      font-size: 24px;
      cursor: pointer;
    }

    .btn:hover {
      opacity: .8;
    }

    .previous {
      left: 20px;
    }

    .next {
      right: 20px;
    }
  </style>
</head>

<body>
  <div class="lunbo">
    <ul class="lunboBox">
      <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240815/3d8169fc2f298fab04c59f555a7547c7.jpeg"
          alt=""></li>
      <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240822/f3c465ca96b33aeaaa0c1431470fc80b.jpeg"
          alt=""></li>
      <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240801/8ee5e012bf0e2049793bfa077c0fb28f.jpeg"
          alt=""></li>
      <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240718/8860962f84f44ae4e3eda5730583563c.jpeg"
          alt=""></li>
      <li><img src="https://ossweb-img.qq.com/upload/adw/image/977/20240823/db9b846d7b4524f910cf0c29dfce1bd6.jpeg"
          alt=""></li>
    </ul>
    <ul class="tabList">
      <li class="tabItem current">选项0</li>
      <li class="tabItem">选项1</li>
      <li class="tabItem">选项2</li>
      <li class="tabItem">选项3</li>
      <li class="tabItem">选项4</li>
    </ul>
    <input type="button" value="&lt;" class="btn previous">
    <input type="button" value="&gt;" class="btn next">
  </div>
 <script>
  class Lunbo {
    constructor() {
      this.lunboBox = document.querySelector('.lunboBox')
      this.lunboList = document.querySelectorAll('.lunboBox li')
      this.tabList = document.querySelectorAll('.tabList li')
      this.previous = document.querySelector('.previous')
      this.next = document.querySelector('.next')
      this.currentIndex = 0
      this.timer = null
      this.init()
    }
    init() {
      this.bindEvent()
      this.autoPlay()
    }
    bindEvent() {
      this.next.addEventListener('click', () => {
        this.currentIndex++
        if (this.currentIndex >= this.lunboList.length) {
          this.currentIndex = 0
        }
        this.move()
      })
      this.previous.addEventListener('click', () => {
        this.currentIndex--
        if (this.currentIndex < 0) {
          this.currentIndex = this.lunboList.length - 1
        }
        this.move()
      })
      this.tabList.forEach((item, index) => {
        item.addEventListener('click', () => {
          this.currentIndex = index
          this.move()
        })
      })
    }
    move() {
      this.lunboBox.style.left = -820 * this.currentIndex + 'px'
      this.tabList.forEach((item, index) => {
        if (index == this.currentIndex) {
          item.classList.add('current')
        } else {
          item.classList.remove('current')
        }
      })
    }
    autoPlay() {
      this.timer = setInterval(() => {
        this.next.click()
      }, 2000)
    }
        }
        new Lunbo()
  
 </script>
</body>

</html>